<template>
	<view>
		<view class="example-body">
			<uni-datetime-picker v-model="range" type="daterange" @change="changeAction" @maskClick="maskClick" />
		</view>
		<view @click="itemAction" :data-index="index"
			style="border-radius: 12rpx; font-weight: 700; margin: 20rpx; background-color: white; padding: 20rpx;"
			class="" v-for="(item, index) in list">
			<view class="" style="display: flex; align-items: center; justify-content: space-between;">
				<view class="">
					<text>单号:</text>
					<text style="margin-left: 10rpx;">{{item.number}}</text>
				</view>
				<view class="" style="color: #dd524d;">
					{{item.statusvalue}}
				</view>
			</view>
			<view class="" style="margin: 10rpx 0; font-size: 28rpx; color: #333;">

				<text>订单日期:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{item.create_time}}</text>
			</view>
			<view v-if="userinfo.role == 2" class="" style="margin: 10rpx 0; font-size: 28rpx; color: #333;">
			
				<text>发展人:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{item.same + '/' +item.name}}</text>
			</view>
			<view class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>档位:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{item.dangwei}}</text>
			</view>
			<view class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>返现金额:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{"¥ " +item.xprice}}</text>
			</view>
			<view class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>补差款金额:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{"¥ " +item.bprice}}</text>
			</view>
			<view class="" style=" display: flex; flex-wrap: wrap; font-size: 24rpx;">
				<view style="position: relative;" v-for="(goodsItem,goodsIndex) in item.goodItems" class="">
					<view
						style="color: #007aff; border: 2rpx solid #007aff;margin:10rpx; padding: 2rpx 10rpx; border-radius: 6rpx;"
						class="">
						{{goodsItem.name + ' / ' + goodsItem.type + ' / ¥' + goodsItem.price}}
					</view>

				</view>
			</view>
			<view v-if="userinfo.role == 2" class=""
				style="margin: 10rpx 0;  font-size: 28rpx; color: #333; display: flex; align-items: center; justify-content: space-between;">
				<view class="">

					<text>办理人姓名:</text>
					<text style="margin-left: 10rpx;">{{item.yname}}</text>
				</view>
				<view class="">
					{{item.yphone}}
				</view>
			</view>
			<view v-if="userinfo.role == 2" class="" style="margin: 10rpx 0;  font-size: 28rpx; color: #333;">
				<text>详细收货地址:</text>
				<text style="margin-left: 10rpx;">{{item.address}}</text>
			</view>
			<view v-if="item.knumber != undefined" class=""
				style="display: flex; justify-content: space-between; margin: 10rpx 0;  font-size: 28rpx; color: #333;">
				<view class="">
					<text>快递单号:</text>
					<text style="color: #f0ad4e; margin-left: 10rpx;">{{item.knumber}}</text>
				</view>
				<view class="">
					<text @click.stop="chakankuaidi" :data-index="index" style="color: #007aff;">查看快递状态</text>
				</view>
			</view>
			<view class="" style="background-color: #e5e5e5;padding: 1rpx; margin-top: 20rpx;">

			</view>
			<view class="" style="display: flex;  margin-top: 20rpx;">
				<button @click.stop="deleteBtnAction" :data-index="index" type="primary" size="mini"
					style="background-color: #007aff;">删除</button>
				<button @click.stop="upBtnAction" :data-index="index" type="primary" size="mini"
					style="background-color: #007aff;">上传快递单号</button>
			</view>

		</view>
		<view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" content="确定是否此订单"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>

		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="快递单号" placeholder="请输入快递单号"
					@confirm="dialogInputConfirm">
					<view class=""
						style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
						<view class=""
							style="flex: 1; border-radius: 6rpx; border: 2px solid #e5e5e5; width: 100%; padding: 10rpx;">
							<input type="text" name="" id="" v-model="kuaidiItem.knumber">

						</view>
						<view @click="saomaAction" class="" style="width: 100rpx;">
							<uni-icons style="color: #666; margin-left: 20rpx;" type="scan" size="30"></uni-icons>
						</view>
					</view>

				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import api from '../../utils/interface.js'

	export default {
		data() {
			return {
				data: {
					start_time: '',
					end_time: '',
					uid: '',
					page: 1,
					size: 10
				},
				list: [],
				userinfo: {},
				item: {},
				kuaidiItem: {},
				currentIndex: 0
				
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('data')
			this.data.uid = this.userinfo.id
			this.getData()

			uni.$on('shuaxinshuju', res => {
				this.data.page = 1;
				this.getData()
			}) 
		},

		onUnload() {
			uni.$off('shuaxinshuju')
		},

		onPullDownRefresh() {
			this.data.page = 1;
			this.getData()
		},
		onReachBottom() {
			this.data.page++;
			this.getData()

		},
		methods: {
			saomaAction(){
				var that = this
				
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						that.kuaidiItem.knumber = res.result;
					},
					fail: function (res) {
						uni.showToast({
							title:'扫描失败,请重试',
							icon:'none'
						})
					}
				});
			},
			itemAction(e) {
				const index = e.currentTarget.dataset.index
				const item = this.list[index];
				const temp = Object.assign({}, item)
				if (temp) {
					getApp().globalData.tempItem = temp
					uni.navigateTo({
						url: '/pages/chengpush/chengpush?type=1'
					})
				}

			},
			chakankuaidi(e) {
				const index = e.currentTarget.dataset.index
				const item = this.list[index]
				const senderphone = item.yphone.substr(-4);
				uni.navigateTo({
					url: "/pages/kuaidichaxun/kuaidichaxun?number=" + item.knumber + '&senderphone=' + senderphone
				})
			},
			upBtnAction(e) {
				const index = e.currentTarget.dataset.index
				this.currentIndex = index
				const item = this.list[index]
				this.kuaidiItem = Object.assign({}, item);
				this.$refs.inputDialog.open()

			},
			async dialogInputConfirm() {
				console.log(this.item);
				const config = {
					url: api.baseUrl + api.updateOrder,
					method: 'post',
					data: this.kuaidiItem
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					uni.showToast({
						icon: "none",
						title: '上传成功'
					})
					// this.data.page = 1;
					// this.getData()


					const item = this.list[this.currentIndex]
					item.knumber = this.kuaidiItem.knumber
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			dialogClose() {

			},
			async dialogConfirm() {

				const config = {
					url: api.baseUrl + api.deleteOrder,
					method: 'post',
					data: this.item
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					this.data.page = 1;

					this.getData()
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			deleteBtnAction(e) {
				const index = e.currentTarget.dataset.index
				this.item = this.list[index]
				this.$refs.alertDialog.open()
			},
			async getData() {
				const config = {
					url: api.baseUrl + api.getOrdersList,
					method: 'post',
					data: this.data
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				uni.stopPullDownRefresh()


				if (code == 1) {

					if (this.data.page == 1) {
						this.list = []
						this.list = data
					} else {
						this.list = [...this.list, ...data]
					}
					this.list.map(item => {
						if (item.status == 1) {
							item.statusvalue = '待发货'
						}
						if (item.status == 2) {
							item.statusvalue = '已发货'
						}
						if (item.status == 3) {
							item.statusvalue = '已完成'
						}
						return item

					})
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			changeAction(e) {

				console.log('changeAction事件:', e);

				this.data.start_time = e[0];
				this.data.end_time = e[1];

				this.getData()
			}
		}
	}
</script>

<style>
	page {
		background-color: #e5e5e5;
	}

	.example-body {
		background-color: #fff;
		padding: 10px;
	}
</style>